import React, { useEffect, useState } from 'react';
import { AutoComplete, Form, message, Checkbox, Row, Col, } from 'antd';
// import { DICT_TYPE, getOptions } from '@/global/service';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormCheckbox,
  ProFormSelect,
  ProFormRadio,
  ProFormDateTimePicker,
  ProFormDigit
} from '@ant-design/pro-form';
import { history } from 'umi';
// import {
//   MANUAL_PUSH,
//   ,
//   JUMPWAY_MODULE,
//   AUDIENCETYPE_ALL,
//   ,
//   AUDIENCETYPE_CLASS,
// } from '../../constants';
import { sendPerson, getInfoByNameOrPhone } from './service';
import moment from 'moment';

declare const ValidateStatuses: ['success', 'warning', 'error', 'validating', '', true];
declare type ValidateStatus = typeof ValidateStatuses[number];

interface AddFormProps {
  modalVisible: boolean;
  // modalType:string;
  paperId:number;
  activityId:number;
  onCancel: () => void;
  onReload: () => void;
}

const requireStyle = {
  color: '#ff4d4f',
  marginRight: '4px',
  fontSize: '14px',
  fontFamily: 'SimSun, sans-serif',
};

const Single: React.FC<AddFormProps> = (props) => {
  const [form] = Form.useForm();
  const { modalVisible, paperId, activityId, onCancel, onReload } = props;
  const [showData, setShowData] = useState(true);
  const [options, setOptions] = useState([]);
  const [receiverId, setReceiverId] = useState(null);
  const [name, setName] = useState(null);

  const [batchValidStatus, setBatchValidStatus] = useState<any>('');
  const [batchErrorText, setBatchErrorText] = useState<string>('');

  const [alistValidStatus, setAlistValidStatus] = useState<any>('');
  const [alistErrorText, setAlistErrorText] = useState<string>('');

  const [validateTotalStatus, setValidateTotalStatus] = useState<any>('');
  const { id } = history.location.query || {}


  const onSearch = async (key: string) => {
    console.log(key);
    // try {
      const data = await getInfoByNameOrPhone({param:key});
      const optionList = !key
        ? []
        : data.result.map((item: { uid: any; nickName: any; phone: any;}) => ({
            id: item.uid,
            name: item.nickName,
            label: `${item.uid}-${item.nickName}-${item.phone}`,
            value: `${item.uid}-${item.nickName}-${item.phone}`,
            // key: `${item.id}`,
          }));
          console.log(optionList)
      setOptions(optionList);
    // } catch (error) {
    //   message.error('搜索失败');
    // }
  };
  const onSelect = (data: any, option: any) => {
    console.log(data);
    console.log(option);
    setReceiverId(option.id);
    setName(option.name);
    // setUid(0);
    // setUid(option.key);
    // actionRef.current?.reload();
    // if (actionRef.current) {
    //   actionRef.current.reload();
    // }
  };

  const batchStatusHanlder = (status: ValidateStatus, text: string) => {
    setBatchValidStatus(status);
    setBatchErrorText(text);
  };
 
  const onFinish = async function () {
    const data = {}
    const values = form.getFieldsValue();
    if(receiverId == null ){
      message.error('请选择学生姓名/手机号');
      return
    }
    data.validTime = moment(new Date(values.startTime)).format('YYYY-MM-DD HH:mm:00');
    data.paperId = paperId;
    data.activityId = activityId;
    data.receiverId= receiverId;
    data.name= name;
    console.log(data)
  
    // return
    const res = await sendPerson(data);
    if (res.code === 200) {
      form.resetFields();
      
      onReload();
      onCancel();
      message.success('添加成功');
    } else {
      if (res.message.startsWith('500')) {
        batchStatusHanlder('error', res.message.replace('500', ''));
        return;
      }
      message.error(res.message);
    }
  };
  
  
  useEffect(() => {
    if (batchValidStatus === 'error' || alistValidStatus === 'error') {
      setValidateTotalStatus('error');
    } else {
      setValidateTotalStatus('');
    }
  }, [batchValidStatus, alistValidStatus]);
  return (
    <ModalForm
      title="单独发放"
      visible={modalVisible}
      form={form}
      onFinish={onFinish}
      modalProps={{
        onCancel: () => {
          form.resetFields();

          onCancel();
        },
      }}
    >
      <ProForm.Item
        label="学生姓名/手机号"
        name="_uid"
        rules={[
          {
            required: true,
            message: '请选择学生姓名/手机号',
          },
        ]}
      >
        <AutoComplete
          options={options}
          onSelect={onSelect}
          onSearch={onSearch}
          placeholder="请选择学生姓名/手机号"
        />
      </ProForm.Item>
      
      
      <ProFormDateTimePicker
        label="生效时间"
        name="startTime"
        width="md"
        fieldProps={{
          format: 'YYYY-MM-DD HH:mm:00',
        }}
        placeholder="请选择生效时间"
        rules={[
          {
            required: true,
            message: '请选择生效时间',
          }
        ]}
      />
    </ModalForm>
  );
};

export default Single;
